<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { getFldm } from '@/utils/get-fldm'
import type { FormInstance, FormRules } from 'element-plus'
import { TgshListQueryResult } from '@/api/gdgl-dto'
import gdglService from '@/api/gdgl'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refresh'])
// 生命周期
onMounted(() => {
  getYyList()
})
/*
 * 打开弹框
 */
const loading = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)
const form = ref({
  shthyy: '',
  shthyydm: '',
  shthyymc: '',
  xyjdclrbh: '',
  xyjdclrxm: '',
})

// 入参
// 生命周期
const multipleSelection = ref<TgshListQueryResult[]>([])
const openDialog = (arr: TgshListQueryResult[]) => {
  multipleSelection.value = arr
  form.value = {
    shthyy: '',
    shthyydm: '',
    shthyymc: '',
    xyjdclrbh: '',
    xyjdclrxm: '',
  }
  dialogVisible.value = true
}

/**
 * 获取退回原因
 */
const yyLits = ref<any[]>([])
const getYyList = async () => {
  yyLits.value = await getFldm('gd026')
}

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<any>>({
  shthyy: [{ required: true, message: '请输入退回原因', trigger: 'change' }],
})
const validateForm = () => {
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      const params = {
        gdxxList: multipleSelection.value.map((el) => {
          return {
            ajbh: el.ajbh,
            bmsah: el.bmsah,
            tgjlbh: el.tgjlbh,
          }
        }),
        shjg: '2',
        ...form.value,
        sftjsh: 'N',
      }
      loading.value = true
      gdglService
        .saveTgshjl(params)
        .then(() => {
          emit('refresh')
          ElMessage.success('退回成功')
          dialogVisible.value = false
        })
        .catch((err) => {
          !err.isError && ElMessage({ type: 'warning', message: err.message })
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}

defineExpose({ openDialog })
</script>
<template>
  <el-dialog v-model="dialogVisible" title="审批退回" width="600px" :close-on-click-modal="false">
    <div class="dialog-box">
      <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="90px" status-icon>
        <el-form-item label="退回原因" prop="shthyy">
          <el-input
            type="textarea"
            v-model="form.shthyy"
            resize="none"
            :rows="4"
            maxlength="500"
            clearable
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="validateForm" :loading="loading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-box {
  width: 100%;
  max-height: 500px;
  overflow: auto;
}
</style>
